<template>
  <div class="active_hp">
     <van-pull-refresh 
        v-model="refreshing" 
        @refresh="onRefresh"
      >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="m,index in list" class="every_list">
        <ul class="active_info">
          <li>
            <div class="active_img">
              <img :src="m.active_imgage" alt=""  style="width:100%;height:100%"/>
            </div>
          </li>
          <li>
            <span>
              {{ m.active_name}}
            </span>
            <p>{{ m.active_time}} &nbsp; {{m.active_minute}}</p>
          </li>
          <li>
            <i></i>
          </li>
        </ul>
        <div class="active_content">
          <p>{{ m.active_content}}</p>
        </div>
        <ul class="active_images">
          <li>
            <img :src="m.active_img[0]" alt="" />
          </li>
          <li>
            <img :src="m.active_img[1]" alt="" />
          </li>
          <li>
            <img :src="m.active_img[2]" alt="" />
          </li>
        </ul>
        <ul class="active_state">
          <li @click="zanHandlerClick(index)" class="zanEle" ><i class="yo-ico">&#xe62c;</i><span>{{m.active_zan}}</span></li>
          <li><i class="yo-ico">&#xe65e;</i><span>{{m.active_pinglun.length}}</span></li>
          <li><i class="yo-ico">&#xe661;</i><span>{{m.active_zhanfa}}</span></li>
        </ul>
      </div>
    </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import Vue from "vue";
import { List, PullRefresh } from "vant";
import axios from "axios";
Vue.use(List);
Vue.use(PullRefresh);
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      zanState:false
    };
  },
  mounted() {
    this._initState()
    this.allPage()
  },
  methods: {
     _initState() {
      // 分页的初始化
      this.limit = 2 // 每页多少条
      this.offset = 1 // 起始index
      this.list = [],
      this.loading = false,
      this.finished = false,
      this.refreshing = false
    },
   async allPage(){
     let a=await this.$http.get('http://localhost:3001/acive');
     this.allPages=a.data.length
    },
    async onLoad() {
      if (this.refreshing) {
        // 偏移量的复位， 让列表从第一页加载
        this.offset = 1

        // 数据清空
        this.list = []

        // 下拉动作复位
        this.refreshing = false
      }
      // let user = this.$store.state.u_id;
      let url='http://localhost:3001/acive'
      let result = await this.$http.get(url,{
            params:{
               u_id:this.$store.state.u_id,
              _limit:this.limit,
              _page:this.offset
            }
          }
        
         // `http://localhost:3001/acive?u_id=${user}&_limit=${{this.list}}&_page=${{this.offset}}`
      );
      let nextData = result.data;
      this.list= [
        ...this.list,
        ...nextData
      ]
      this.offset++
      this.loading = false;
      
      if (this.list.length >=this.allPages) {
        this.finished = true;
      }
      
    },
    onRefresh() {
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    zanHandlerClick(index){
      let liZan=document.querySelectorAll('.zanEle')
      console.log(liZan);
      this.list[index].active_zanState=!this.list[index].active_zanState
      if(this.list[index].active_zanState){
        this.list[index].active_zan=this.list[index].active_zan+1
        liZan[index].style.color="#3d7eff"
      }else{
        this.list[index].active_zan=this.list[index].active_zan-1
        liZan[index].style.color="#333"
      }
       
    }
  },
};
</script>
<style lang="stylus" scoped>
.active_hp {
  width: 100%;
  height: 100%;

  .every_list {
    width: 92%;
    height: 3.29rem;
    margin-left: 4%;
    margin-top: 0.12rem;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgb(215 215 215);
    overflow: hidden;

    .active_info {
      display: flex;

      li:first-child {
        flex: 60;

        .active_img {
          width: 0.42rem;
          height: 0.42rem;
          margin: 0.2rem 0.1rem 0.1rem 0.1rem;
          border-radius: 0.21rem;
          background: yellow;
          overflow: hidden;
        }
      }

      li:nth-child(2) {
        flex: 255;
        margin: 0.2rem 0.1rem 0.1rem 0.05rem;

        span {
          font-size: 0.16rem;
        }

        p {
          font-size: 0.12rem;
          color: #999;
        }
      }

      li:last-child {
        flex: 60;
      }
    }

    .active_content {
      width: 92%;
      height 30%
      margin-left: 4%;
      word-wrap: break-word;

      p {
        font-size: 13px;
      }
    }

    .active_images {
      width: 92%;
      display: flex;
      justify-content: space-around;
      margin-left: 4%;
      margin-top: 0.01rem;
      li {
        flex: 1;

        img {
          width: 96%;
        }
      }
    }

    .active_state {
      display: flex;
      justify-content: space-around;
      padding-top: 0.08rem;

      li {
        flex: 1;
        text-align: center;

        i {
          font-size: 0.2rem;
        }

        span {
          display: block;
        }
      }
    }
  }
}
</style>